<script setup>
import { toRefs } from 'vue';
import { ElPagination } from 'element-plus';

const props = defineProps({
  pageNumber: Number,
  pageSize: Number,
  total: Number,
});
const { pageNumber, pageSize, total } = toRefs(props);
const emit = defineEmits(['handleCurrentChange']);

const handleCurrentChange = (val) => {
  emit('handleCurrentChange', val);
};
</script>
<template>
  <div class="pagination mt-20px">
    <ElPagination
      v-model:current-page="pageNumber"
      v-model:page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="total"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
